<template>
    <div v-if="isShow">
        <div class="card">
            加载中。。。
       </div>
    </div>
</template> 

<script setup lang="ts">
import { ref } from 'vue'
const isShow = ref(false)
 const show  = ()=>{
    isShow.value = !isShow.value
 }
 defineExpose({
    show
 })
</script>

<style scoped>
  .card{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    color: #fff;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>